<template>

  <div class="container2">

    <el-row style="height: 10%">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div style="letter-spacing: 1rem;color: ghostwhite;font-weight: bold;font-size:3.2rem;text-align: center;">
            转轴车间生产管理大屏
          </div>
        </div>
      </el-col>
    </el-row>


    <el-row style="height: 50%">
      <el-col :span="8" style="margin: 1rem;width: 40vw;height: 30vh">
        <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">工单未下达提醒</div>

        <div>
          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="5" style="padding-left: 2rem">
                <div>工单号</div>
              </el-col>
              <el-col :span="6" style="position: relative;left: 2.5rem;">
                <div>品名</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;right: 1.5rem;">开工日期</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;left:0.5rem;">完工日期</div>
              </el-col>
              <el-col :span="2">
                <div style="position: relative;left:1.2rem;">工单数量</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;left:2.7rem;">超出时间</div>
              </el-col>
              <el-col :span="2">
                <div style="position: relative;left:1rem;">未下达数量</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent1" class="table-content">
            <template v-for="(item, index) in shopOrderList">
              <div class="table-line content-line">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="5">
                      <div>{{ item.shopOrder }}</div>
                    </el-col>
                    <el-col :span="6" style="position: relative;right: 1rem;">
                      <div>{{ item.itemName }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;right: 2rem;">{{ item.startTime }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;">{{ item.endTime }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div style="position: relative;left:1.2rem;">{{ item.releaseQty }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;left:1.7rem;">{{ item.overdue }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div style="position: relative;left:1rem;">{{ item.noReleasedQty }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>

        </div>
      </el-col>

      <el-col :span="8" style="margin: 1rem;width: 26vw;height: 26vh">
        <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">工单派工入库</div>
        <div>
          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="6" style="padding-left: 2rem">
                <div style="position: relative;right: 1rem;">品名</div>
              </el-col>
              <el-col :span="6">
                <div>工单下达总数</div>
              </el-col>
              <el-col :span="6">
                <div>工单派工总数</div>
              </el-col>
              <el-col :span="6">
                <div style="padding-left: 1rem;">工单入库总数</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent3" class="table-content">
            <template v-for="(item, index) in shopOrderManageList">
              <div class="table-line content-line">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="6">
                      <div>{{ item.itemName }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div>{{ item.releaseQty }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div>{{ item.dispatchQty }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div>{{ item.erpCompleteQty }}</div>
                    </el-col>
                  </el-row>
                </div>

              </div>
            </template>
          </div>

        </div>
      </el-col>

      <el-col :span="8" style="margin: 1rem;width: 28vw;height: 26vh">
        <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">违规情况</div>

        <div>
          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="4">
                <div style="position: relative;right: 1rem;">快速进出站</div>
              </el-col>
              <el-col :span="5">
                <div>隔天进出站</div>
              </el-col>
              <el-col :span="5">
                <div style="position: relative;left: 0.5rem;">快速自检</div>
              </el-col>
              <el-col :span="5">
                <div style="position: relative;left: 1rem;">快速点检</div>
              </el-col>
              <el-col :span="5">
                <div style="position: relative;left: 1.2rem;">调机次数</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent2" class="table-content">
            <template>
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="4">
                      <div>{{ checkError.quicklyInAndOut }}</div>
                    </el-col>
                    <el-col :span="5">
                      <div>{{ checkError.overDayInAndOut }}</div>
                    </el-col>
                    <el-col :span="5">
                      <div>{{ checkError.quicklySelfCheck }}</div>
                    </el-col>
                    <el-col :span="5">
                      <div>{{ checkError.quicklyCheckItem }}</div>
                    </el-col>
                    <el-col :span="5">
                      <div>{{ checkError.quicklyTune }}</div>
                    </el-col>
                  </el-row>
                </div>

              </div>
            </template>
          </div>

        </div>
      </el-col>

    </el-row>

    <el-row style="height: 40%">

      <el-col :span="8" style="margin: 1rem;width: 30vw;height: 30vh">
        <div class="left_bottom">
          <SimEcharts :chart-data="pillarData"/>
        </div>
      </el-col>

      <el-col :span="8" style="margin: 1rem;width: 38vw;height: 40vh;position: relative;bottom: 4rem;">
        <div>

          <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">设备安灯异常记录</div>

          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="3">
                <div style="position: relative;right: 0.5rem;">设备编号</div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;left: 0.5rem;">设备名称</div>
              </el-col>
              <el-col :span="3">
                <div>安灯异常编码</div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;left: 1.8rem;">安灯异常明细</div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;left: 1.3rem;">异常状态</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;">触发人员</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;">解除人员</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent4" class="table-content">
            <template v-for="(item, index) in andonDetails">
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="3">
                      <div>{{ item.device }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div>{{ item.deviceName }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div>{{ item.exceptionCode }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="position: relative;left: 2.5rem;">{{ item.andonDetail }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div>{{ item.state }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;right: 0.7rem;">{{ item.triggerUserName }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;right: 1rem;">{{ item.relieveUserName }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>

        </div>
      </el-col>


      <el-col :span="8" style="margin: 1rem;width: 27vw;height: 28vh;position: relative;bottom: 4rem;">
        <div>

          <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">检验合格记录</div>

          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">
            <el-row>
              <el-col :span="6">
                <div style="">
                  检验单编号
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  批次条码
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  检验工序名
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  检验类型
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  检验结果
                </div>
              </el-col>
            </el-row>
          </div>

          <div ref="tableContent5" class="table-content">
            <template v-for="(item, index) in deviceChecks">
              <div class="table-line content-line">
                <div
                    style="text-align: center;font-size: 60%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="6">
                      <div>{{ item.checkCode }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div style="padding-left: 0.9rem">{{ item.sfc }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="position: relative;left: 1.2rem;">{{ item.operationName }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div>{{ item.checkType }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="position: relative;right: 0.7rem;">{{ item.checkResult }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>
        </div>
      </el-col>

    </el-row>


  </div>


</template>

<script>

import {closeWebsocket, connectWebsocket, sendMessage} from "@/api/websocket";
import {peopleAttendance} from "@/api/service-module/dashBoard/echartsData";

export default {
  name: "ShaftRotationManagerScreen",
  data() {
    return {
      pillarData: JSON.parse(JSON.stringify(peopleAttendance)),
      shopOrderList: [
        {
          shopOrder: 'D-GD022005253641',
          itemName: '6YS转子',
          startTime: '2022-06-17',
          endTime: '2022-06-19',
          releaseQty: '100',
          overdue: '2d',
          noReleasedQty: '30'
        },
        {
          shopOrder: 'D-GD022005253641',
          itemName: '6YS转子',
          startTime: '2022-06-17',
          endTime: '2022-06-19',
          releaseQty: '100',
          overdue: '2d',
          noReleasedQty: '30'
        },
        {
          shopOrder: 'D-GD022005253641',
          itemName: '6YS转子',
          startTime: '2022-06-17',
          endTime: '2022-06-19',
          releaseQty: '100',
          overdue: '2d',
          noReleasedQty: '30'
        },
        {
          shopOrder: 'D-GD022005253641',
          itemName: '6YS转子',
          startTime: '2022-06-17',
          endTime: '2022-06-19',
          releaseQty: '100',
          overdue: '2d',
          noReleasedQty: '30'
        },
        {
          shopOrder: 'D-GD022005253641',
          itemName: '6YS转子',
          startTime: '2022-06-17',
          endTime: '2022-06-19',
          releaseQty: '100',
          overdue: '2d',
          noReleasedQty: '30'
        },
        {
          shopOrder: 'D-GD022005253641',
          itemName: '6YS转子',
          startTime: '2022-06-17',
          endTime: '2022-06-19',
          releaseQty: '100',
          overTime: '2d',
          noReleasedQty: '30'
        },
        {
          shopOrder: 'D-GD022005253641',
          itemName: '6YS转子',
          startTime: '2022-06-17',
          endTime: '2022-06-19',
          releaseQty: '100',
          overTime: '2d',
          noReleasedQty: '30'
        },
        {
          shopOrder: 'D-GD022005253641',
          itemName: '6YS转子',
          startTime: '2022-06-17',
          endTime: '2022-06-19',
          releaseQty: '100',
          overTime: '2d',
          noReleasedQty: '30'
        },
        {
          shopOrder: 'D-GD022005253641',
          itemName: '6YS转子',
          startTime: '2022-06-17',
          endTime: '2022-06-19',
          releaseQty: '100',
          overTime: '2d',
          noReleasedQty: '30'
        },
        {
          shopOrder: 'D-GD022005253641',
          itemName: '6YS转子',
          startTime: '2022-06-17',
          endTime: '2022-06-19',
          releaseQty: '100',
          overTime: '2d',
          noReleasedQty: '30'
        },
      ],
      shopOrderManageList: [
        {
          itemName: '4YS转子',
          releaseQty: '800',
          dispatchQty: '500',
          erpCompleteQty: '300'
        },
        {
          itemName: '4YS转子',
          releaseQty: '800',
          dispatchQty: '500',
          erpCompleteQty: '300'
        },
        {
          itemName: '4YS转子',
          releaseQty: '800',
          dispatchQty: '500',
          erpCompleteQty: '300'
        },
        {
          itemName: '4YS转子',
          releaseQty: '800',
          dispatchQty: '500',
          erpCompleteQty: '300'
        },

        {
          itemName: '4YS转子',
          releaseQty: '800',
          dispatchQty: '500',
          erpCompleteQty: '300'
        },
        {
          itemName: '4YS转子',
          releaseQty: '800',
          dispatchQty: '500',
          erpCompleteQty: '300'
        },
        {
          itemName: '6YS转子',
          releaseQty: '800',
          dispatchQty: '500',
          erpCompleteQty: '300'
        },
        {
          itemName: '3YS转子',
          releaseQty: '800',
          dispatchQty: '500',
          erpCompleteQty: '300'
        },
        {
          itemName: '4YS转子',
          releaseQty: '800',
          dispatchQty: '500',
          erpCompleteQty: '300'
        }, {
          itemName: '4YS转子',
          releaseQty: '800',
          dispatchQty: '500',
          erpCompleteQty: '300'
        },
      ],
      checkError: {
        quicklyInAndOut: '2',
        overDayInAndOut: '1',
        quicklySelfCheck: '2',
        quicklyCheckItem: '2',
        quicklyTune: '5'
      },
      andonDetails: [
        {
          device: 'DY251296',
          deviceName: '双头数控车床',
          exceptionCode: 'Andon2202173114',
          andonDetail: '链条脱落',
          state: '已解除', // 后端应为1 2 3 形式
          triggerUserName: '赵向毅',
          relieveUserName: '王海军',
        },
        {
          device: 'DY251296',
          deviceName: '双头数控车床',
          exceptionCode: 'Andon2202173114',
          andonDetail: '链条脱落',
          state: '已解除', // 后端应为1 2 3 形式
          triggerUserName: '赵向毅',
          relieveUserName: '王海军',
        },
        {
          device: 'DY251296',
          deviceName: '双头数控车床',
          exceptionCode: 'Andon2202173114',
          andonDetail: '链条脱落',
          state: '已解除', // 后端应为1 2 3 形式
          triggerUserName: '赵向毅',
          relieveUserName: '王海军',
        },
        {
          device: 'DY251296',
          deviceName: '双头数控车床',
          exceptionCode: 'Andon2202173114',
          andonDetail: '链条脱落',
          state: '已解除', // 后端应为1 2 3 形式
          triggerUserName: '赵向毅',
          relieveUserName: '王海军',
        },
        {
          device: 'DY251296',
          deviceName: '双头数控车床',
          exceptionCode: 'Andon2202173114',
          andonDetail: '链条脱落',
          state: '已解除', // 后端应为1 2 3 形式
          triggerUserName: '赵向毅',
          relieveUserName: '王海军',
        },
        {
          device: 'DY251296',
          deviceName: '双头数控车床',
          exceptionCode: 'Andon2202173114',
          andonDetail: '链条脱落',
          state: '已解除', // 后端应为1 2 3 形式
          triggerUserName: '赵向毅',
          relieveUserName: '王海军',
        },
        {
          device: 'DY251296',
          deviceName: '双头数控车床',
          exceptionCode: 'Andon2202173114',
          andonDetail: '链条脱落',
          state: '已解除', // 后端应为1 2 3 形式
          triggerUserName: '赵向毅',
          relieveUserName: '王海军',
        },
        {
          device: 'DY251296',
          deviceName: '双头数控车床',
          exceptionCode: 'Andon2202173114',
          andonDetail: '链条脱落',
          state: '已解除', // 后端应为1 2 3 形式
          triggerUserName: '赵向毅',
          relieveUserName: '王海军',
        }, {
          device: 'DY251296',
          deviceName: '双头数控车床',
          exceptionCode: 'Andon2202173114',
          andonDetail: '链条脱落',
          state: '已解除', // 后端应为1 2 3 形式
          triggerUserName: '赵向毅',
          relieveUserName: '王海军',
        },
        {
          device: 'DY251296',
          deviceName: '双头数控车床',
          exceptionCode: 'Andon2202173114',
          andonDetail: '链条脱落',
          state: '已解除', // 后端应为1 2 3 形式
          triggerUserName: '赵向毅',
          relieveUserName: '王海军',
        }
      ],
      deviceChecks: [
        {
          checkCode: 'DYQC21062900002',
          sfc: 'D-04JC210629005',
          operationName: '敲焊疤校直',
          checkUserName: '李春林',
          checkResult: '合格',
          checkType: '首检'
        },
        {
          checkCode: 'DYQC21062900002',
          sfc: 'D-04JC210629005',
          operationName: '敲焊疤校直',
          checkUserName: '李春林',
          checkResult: '合格',
          checkType: '首检'
        },
        {
          checkCode: 'DYQC21062900002',
          sfc: 'D-04JC210629005',
          operationName: '敲焊疤校直',
          checkUserName: '李春林',
          checkResult: '合格',
          checkType: '首检'
        }
        , {
          checkCode: 'DYQC21062900002',
          sfc: 'D-04JC210629005',
          operationName: '敲焊疤校直',
          checkUserName: '李春林',
          checkResult: '合格',
          checkType: '首检'
        },
        {
          checkCode: 'DYQC21062900002',
          sfc: 'D-04JC210629005',
          operationName: '敲焊疤校直',
          checkUserName: '李春林',
          checkResult: '合格',
          checkType: '首检'
        },
        {
          checkCode: 'DYQC21062900002',
          sfc: 'D-04JC210629005',
          operationName: '敲焊疤校直',
          checkUserName: '李春林',
          checkResult: '合格',
          checkType: '首检'
        },
        {
          checkCode: 'DYQC21062900002',
          sfc: 'D-04JC210629005',
          operationName: '敲焊疤校直',
          checkUserName: '李春林',
          checkResult: '合格',
          checkType: '首检'
        }
      ],
      array: []
    }
  },
  methods: {
    reloadWeb() {
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload, 1000 * 60 * 60 * 8)
    },
    initWebData() {
      connectWebsocket(
          // 测试地址
          process.env.VUE_APP_WS_URL + '/ProduceManagerScreen/WorkShopProduct',
          //'ws://192.168.12.24:20088/ProduceManagerScreen/WorkShopProduct',
          // 传递给后台的数据
          {},
          // 成功拿到后台返回的数据的回调函数
          (data) => {
            let dataJson = JSON.parse(data)
            console.log(dataJson)
            this.shopOrderList = dataJson.selectShopOrderNoReleased
            this.shopOrderManageList = dataJson.selectWarehousings
            this.checkError = dataJson.selectFastInOrOutStation
            this.andonDetails = dataJson.selectAndonExceptionRecords
            this.deviceChecks = dataJson.selectCheckQualified
            for (let key in dataJson.selectToPresent) {
              if (this.array.length < 5) {
                this.array.push(key)
              }
            }
            this.pillarData.xAxis.data = this.array

            this.pillarData.series[0].data[0] = dataJson.selectToPresent['磨床组'][0]
            this.pillarData.series[1].data[0] = dataJson.selectToPresent['磨床组'][1]
            this.pillarData.series[2].data[0] = dataJson.selectToPresent['磨床组'][2]

            this.pillarData.series[0].data[1] = dataJson.selectToPresent['转子组'][0]
            this.pillarData.series[1].data[1] = dataJson.selectToPresent['转子组'][1]
            this.pillarData.series[2].data[1] = dataJson.selectToPresent['转子组'][2]

            this.pillarData.series[0].data[2] = dataJson.selectToPresent['泵轴组'][0]
            this.pillarData.series[1].data[2] = dataJson.selectToPresent['泵轴组'][1]
            this.pillarData.series[2].data[2] = dataJson.selectToPresent['泵轴组'][2]

            this.pillarData.series[0].data[3] = dataJson.selectToPresent['轴料组'][0]
            this.pillarData.series[1].data[3] = dataJson.selectToPresent['轴料组'][1]
            this.pillarData.series[2].data[3] = dataJson.selectToPresent['轴料组'][2]

            this.pillarData.series[0].data[4] = dataJson.selectToPresent['机轴组'][0]
            this.pillarData.series[1].data[4] = dataJson.selectToPresent['机轴组'][1]
            this.pillarData.series[2].data[4] = dataJson.selectToPresent['机轴组'][2]


          },
          () => {
            sendMessage("Im tired!")
          }
      )
    },
    initData() {
      this.pillarData.title.text = '人员出勤'
      this.pillarData.title.textStyle.fontSize = '20'
      this.pillarData.title.textStyle.color = '#fffffb'

      this.pillarData.xAxis.data = ['磨床组', '转子组', '轴料组', '机轴组', '泵轴组']
      this.pillarData.series[0].data = [90, 120, 200, 150, 80]
      this.pillarData.series[1].data = [60, 80, 100, 50, 30]
      this.pillarData.series[2].data = [30, 40, 100, 100, 50]
    },
    rollText() {
      let speed = 280
      let that = this
      let tmpHi = 0

      function Marquee() {
        if (that.$refs.tableContent1) {
          tmpHi = that.$refs.tableContent1.scrollTop++
          if (tmpHi === that.$refs.tableContent1.scrollTop) {
            that.$refs.tableContent1.scrollTop = 0
          }
        }

        if (that.$refs.tableContent2) {
          tmpHi = that.$refs.tableContent2.scrollTop++
          if (tmpHi === that.$refs.tableContent2.scrollTop) {
            that.$refs.tableContent2.scrollTop = 0
          }
        }


        if (that.$refs.tableContent3) {
          tmpHi = that.$refs.tableContent3.scrollTop++
          if (tmpHi === that.$refs.tableContent3.scrollTop) {
            that.$refs.tableContent3.scrollTop = 0
          }
        }


        if (that.$refs.tableContent4) {
          tmpHi = that.$refs.tableContent4.scrollTop++
          if (tmpHi === that.$refs.tableContent4.scrollTop) {
            that.$refs.tableContent4.scrollTop = 0
          }
        }

        if (that.$refs.tableContent5) {
          tmpHi = that.$refs.tableContent5.scrollTop++
          if (tmpHi === that.$refs.tableContent5.scrollTop) {
            that.$refs.tableContent5.scrollTop = 0
          }
        }

      }

      setInterval(Marquee, speed) //设置定时器
    }
  },
  created() {
    this.reloadWeb()
    this.initData()
    this.initWebData()
  },
  mounted() {
    this.rollText()
  },
  destroyed() {
    closeWebsocket()
  }
}
</script>

<style lang="scss" scoped>
.container2 {
  background-image: url("../../assets/manage_board/06.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;

  .table-content {
    height: 32vh;
    color: #ffffff;
    overflow: hidden;
    margin-top: 0.5rem;

    .table-line:nth-of-type(odd) {
      background: rgba(122, 178, 203, 0.22);
    }

    .table-line:nth-of-type(even) {
      background: rgba(213, 196, 127, 0.22);
    }

    .table-line {
      position: relative;
      border: 1px solid rgba(23, 17, 17, 0.98);
      border-radius: 5px;
      color: cyan;
      margin-top: 0.2rem;
      line-height: 1.2rem;

      .line-cell {
        word-wrap: break-word;
      }
    }

  }

}
</style>
